<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>分配权限页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            <div class="header">
                <span>分配权限</span>
            </div>
            <div class="main" style="padding: 0 15px;">
                <!-- 配置属性, 目前仅支持 单主表 多子表 结构 -->
                <div id="form" :data-options="JSON.stringify({'tableName':'base_system_user_info','formName':'dataForm' ,'primaryKey':'User_Number'})"></div>
                <!-- <div style="margin-top: 20px;">
                    菜单：<el-input @change="check" v-model="Model_Name" style="width: 200px;margin-right: 10px;" placeholder="请输入菜单" clearable></el-input>
                </div> -->
                <el-table tooltip-effect="dark" border v-loading="loading" :data="treeData" default-expand-all
                    style="margin-top: 15px;" height="calc(100% - 30px)" row-key="Model_Number" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column width="250" prop="Model_Number" show-overflow-tooltip label="编号"></el-table-column>
                    <el-table-column prop="Icon" align="center" width="60" label="图标">
                        <template v-slot="{row}">
                            <i :class="row.Icon" style="font-size: 20px"></i>
                        </template>
                    </el-table-column>
                    <el-table-column width="200" prop="Model_Name" show-overflow-tooltip label="菜单">
                        <template slot="header" slot-scope="scope">
                            <div style="display: flex; align-items: center;">
                                <span style="flex-shrink: 0;margin-right: 10px;">菜单</span>
                                <el-input @change="check" v-model="Model_Name" size="mini" placeholder="输入关键字搜索"/>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" min-width="120" label="一键全选">
                        <template v-slot="{row}">
                            <el-switch @change="handleSubmit(row, true)" :disabled="row.loading" :value="totalSwitch(row)" active-color="#13ce66" v-if="!row.children"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="权限配置（拥有新增、删除、修改、查询中任意一个权限时，则拥有该菜单权限）">
                        <el-table-column v-for="(item, index) in role" :key="index" min-width="120" align="center" :label="item.label">
                            <template v-slot="{row}">
                                <el-switch @change="handleSubmit(row)" :disabled="row.loading" v-model="row[item.value]" active-value="1" inactive-value="0" v-if="!row.children"></el-switch>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
            <div class="footer">
                <el-button size="medium" @click="handleBack">返回</el-button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/rights.js"></script>
</body>

</html>